<template>
  <div>
    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
    </v-form-render>
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const formJson = reactive({"widgetList":[{"key":24972,"type":"grid","category":"container","icon":"grid","cols":[{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext107468","columnWidth":"200px","hidden":false,"textContent":"左侧占位","textAlign":"center","fontSize":"13px","preWrap":false,"customClass":[],"onCreated":"","onMounted":"","label":"static-text"},"id":"statictext107468"}],"options":{"name":"gridCol97180","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":[]},"id":"grid-col-97180"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext25308","columnWidth":"200px","hidden":false,"textContent":"Blog","textAlign":"center","fontSize":"13px","preWrap":false,"customClass":[],"onCreated":"","onMounted":"","label":"static-text"},"id":"statictext25308"}],"options":{"name":"gridCol65273","hidden":false,"span":3,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":[]},"id":"grid-col-65273"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[],"options":{"name":"gridCol15323","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-15323"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext73826","columnWidth":"200px","hidden":false,"textContent":"首页","textAlign":"left","fontSize":"13px","preWrap":false,"customClass":[],"onCreated":"","onMounted":"","label":"static-text"},"id":"statictext73826"}],"options":{"name":"gridCol41553","hidden":false,"span":8,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":[]},"id":"grid-col-41553"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[],"options":{"name":"gridCol95106","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-95106"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":95507,"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input68904","label":"搜索博客","labelAlign":"","type":"text","defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":false,"requiredHint":"","validation":"","validationHint":"","customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"custom-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":"","onAppendButtonClick":""},"id":"input68904"}],"options":{"name":"gridCol19642","hidden":false,"span":4,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":[]},"id":"grid-col-19642"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[],"options":{"name":"gridCol22769","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-22769"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":38519,"type":"button","icon":"button","formItemFlag":false,"options":{"name":"button36989","label":"登录 | 注册","columnWidth":"200px","size":"","displayStyle":"block","disabled":false,"hidden":false,"type":"","plain":false,"round":false,"circle":false,"icon":null,"customClass":[],"onCreated":"","onMounted":"","onClick":""},"id":"button36989"}],"options":{"name":"gridCol80132","hidden":false,"span":4,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":[]},"id":"grid-col-80132"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext62470","columnWidth":"200px","hidden":false,"textContent":"右侧占位","textAlign":"left","fontSize":"13px","preWrap":false,"customClass":"","onCreated":"","onMounted":"","label":"static-text"},"id":"statictext62470"}],"options":{"name":"gridCol19209","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-19209"}],"options":{"name":"grid20453","hidden":false,"gutter":12,"colHeight":null,"customClass":[]},"id":"grid20453"},{"key":24972,"type":"grid","category":"container","icon":"grid","cols":[{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext7592","columnWidth":"200px","hidden":false,"textContent":"左侧占位","textAlign":"center","fontSize":"13px","preWrap":false,"customClass":[],"onCreated":"","onMounted":"","label":"static-text"},"id":"statictext7592"}],"options":{"name":"gridCol100860","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-100860"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext77175","columnWidth":"200px","hidden":false,"textContent":"main 左","textAlign":"center","fontSize":"13px","preWrap":false,"customClass":"","onCreated":"","onMounted":"","label":"static-text"},"id":"statictext77175"}],"options":{"name":"gridCol28647","hidden":false,"span":14,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":[]},"id":"grid-col-28647"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext99303","columnWidth":"200px","hidden":false,"textContent":"main 右","textAlign":"left","fontSize":"13px","preWrap":false,"customClass":[],"onCreated":"","onMounted":"","label":"static-text"},"id":"statictext99303"}],"options":{"name":"gridCol114462","hidden":false,"span":8,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-114462"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext99856","columnWidth":"200px","hidden":false,"textContent":"右侧展位","textAlign":"left","fontSize":"13px","preWrap":false,"customClass":"","onCreated":"","onMounted":"","label":"static-text"},"id":"statictext99856"}],"options":{"name":"gridCol42119","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-42119"}],"options":{"name":"grid37400","hidden":false,"gutter":12,"colHeight":null,"customClass":""},"id":"grid37400"},{"key":24972,"type":"grid","category":"container","icon":"grid","cols":[{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext95248","columnWidth":"200px","hidden":false,"textContent":"左侧占位","textAlign":"center","fontSize":"13px","preWrap":false,"customClass":"","onCreated":"","onMounted":"","label":"static-text"},"id":"statictext95248"}],"options":{"name":"gridCol19852","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-19852"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext16072","columnWidth":"200px","hidden":false,"textContent":"底部","textAlign":"center","fontSize":"13px","preWrap":false,"customClass":[],"onCreated":"","onMounted":"","label":"static-text"},"id":"statictext16072"}],"options":{"name":"gridCol88727","hidden":false,"span":22,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-88727"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"key":11679,"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext66068","columnWidth":"200px","hidden":false,"textContent":"右侧占位","textAlign":"left","fontSize":"13px","preWrap":false,"customClass":"","onCreated":"","onMounted":"","label":"static-text"},"id":"statictext66068"}],"options":{"name":"gridCol53283","hidden":false,"span":1,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-53283"}],"options":{"name":"grid36653","hidden":false,"gutter":12,"colHeight":null,"customClass":""},"id":"grid36653"}],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":[],"functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}})
const formData = reactive({})
const optionData = reactive({})
const vFormRef = ref(null)

const submitForm = () => {
  vFormRef.value.getFormData().then(formData => {
    // Form Validation OK
    alert( JSON.stringify(formData) )
  }).catch(error => {
    // Form Validation failed
    ElMessage.error(error)
  })
}
</script>